<template>
	<el-container>
		<el-header class="header-tabs">
			<el-tabs type="card" v-model="search.status" @tab-change="tabChange">
				<el-tab-pane label="全部" name=""></el-tab-pane>
				<el-tab-pane label="未完结" name="0"></el-tab-pane>
				<el-tab-pane label="已完结" name="1"></el-tab-pane>

				<el-tab-pane label="已退款" name="2"></el-tab-pane>
			</el-tabs>
		</el-header>
		<el-header>
			<!-- <div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
				<el-button type="primary" icon="sc-icon-download" @click="onBatchExport">导出</el-button>
			</div> -->
			<div class="left-panel">
				<div class="right-panel-search">
					<el-date-picker style="width: 150px;" v-model="search.start_time" value-format="X" type="date"
						placeholder="开始时间" />
					<el-date-picker style="width: 150px;" v-model="search.end_time" value-format="X" type="date"
						placeholder="截止时间" />
					<el-select style="width: 100px;" v-model="search.channel" clearable
						placeholder="选择渠道" filterable>
						<el-option v-for="(item, key) in channellist" :key="key" :label="item" :value="key" />
					</el-select>
					<el-input style="width: 150px;" v-model="search.keyword" placeholder="关键词搜索" clearable></el-input>
					<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="list.apiObj" row-key="id" stripe>
				<el-table-column label="会员ID" prop="member_id" width="150"></el-table-column>
				<el-table-column label="标题" prop="title" width="150"></el-table-column>
				<el-table-column label="子业务" prop="sub_channel" width="150"></el-table-column>
				<el-table-column label="订单金额" prop="amount" width="100"></el-table-column>
				<el-table-column label="平台佣金" prop="commission" width="100"></el-table-column>
				<el-table-column label="会员佣金" prop="commission_member" width="100"></el-table-column>
				<el-table-column label="订单号" prop="ordernum" width="150"></el-table-column>
				<el-table-column label="下单时间" prop="create_time" width="150"></el-table-column>
				<!-- <el-table-column label="备注" prop="remark" width="150"></el-table-column> -->
				<el-table-column label="状态" prop="status" width="150">
					<template #default="scope">
						<p>{{statuss[scope.row.status]}}</p>
					</template>
				</el-table-column>
				<el-table-column label="渠道" prop="channel" width="150">
					<template #default="scope">
						<p>{{channellist[scope.row.channel]}}</p>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" fixed="right" align="right" width="250">
					<template #default="scope">
							<el-button plain size="small"
								@click="$router.push({ path: '/order/bill/'+ scope.row.id});">账单记录</el-button>
							<el-button plain size="small" @click="table_show(scope.row)">查看</el-button>
							<el-button size="small" v-if="[1, 2].includes(scope.row.status)" type="primary"
								@click="show_circulateSubmit(scope.row)">提交资料</el-button>
							<el-button type="primary" v-if="scope.row.status == 5" size="small" @click="thaw(scope.row, 0)">审核解冻</el-button>
							<el-button type="primary" v-if="[1, 2].includes(scope.row.status) && [1, 2].includes(scope.row.service_type)" size="small" @click="thaw(scope.row, 1)">解约</el-button>
						<el-button type="primary" plain size="small" @click="table_edit(scope.row)">编辑</el-button>
						<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
							<template #reference>
								<el-button text type="primary" size="small">删除</el-button>
							</template>
						</el-popconfirm>

					</template>
				</el-table-column> -->
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
	// import table2excel from 'js-table2excel'
	import config from "@/config/table";
	export default {
		name: 'orderList',
		components: {
		},
		data() {
			return {
				search: {
					start_time: '',
					end_time: '',
					keyword: '',
					status: '',
					channel: ''
				},
				statuss: {
					'0': '未完结', '1': '已完结', '2': '已退款'
				},
				// channellist: [
				// 	{id: '1', name: '美团'},
				// 	{id: '2', name: '饿了么'},
				// 	{id: '3', name: '聚合推广'},
				// 	{id: '4', name: '快递'}
				// ],
				channellist: {'1': '美团', '2': '饿了么', '3': '聚合推广', '4': '快递'},
				// filterData: [{
				// 	title: "状态",
				// 	key: "status",
				// 	options:
				// 	// [{
				// 	// 		label: "全部",
				// 	// 		value: "0"
				// 	// 	},
				// 	// 	{
				// 	// 		label: "未租赁",
				// 	// 		value: "1"
				// 	// 	},
				// 	// 	{
				// 	// 		label: "已租赁",
				// 	// 		value: "2"
				// 	// 	},
				// 	// 	{
				// 	// 		label: "不可租赁",
				// 	// 		value: "3"
				// 	// 	}
				// 	// ],
				// 	[
				// 		{value: '', label: '全部'},
				// 		{value: '-1', label: '删除'},
				// 		{value: '0', label: '未审核'},
				// 		{value: '1', label: '已审核'},
				// 		{value: '2', label: '已冻结'}
				// 	]
				// }, ],
				list: {
					apiObj: this.$API.order.distribution.list
				},
				shoplist: []
			}
		},
		computed: {
		},
		mounted() {
			// this.getInit()
		},
		methods: {
			async onBatchExport () {
			 //  let column = [
				//   {
				//     title: '标题',
				//     key: 'title',
				//     type: 'text',
				//   },
				//   {
				//     title: '押金',
				//     key: 'deposit',
				//     type: 'text',
				//   },
				//   {
				//     title: '月租金',
				//     key: 'price',
				//     type: 'text',
				//   },
				//   {
				//     title: '分期数',
				//     key: 'cycle',
				//     type: 'text',
				//   },
				//   {
				//     title: '门店名',
				//     key: 'shop_name',
				//     type: 'text',
				//   },
			 //    {
			 //      title: '订单号',
			 //      key: 'ordernum',
			 //      type: 'text',
			 //    },

				// {
				//   title: '备注',
				//   key: 'remark',
				//   type: 'text',
				// },
				// {
				//   title: '姓名',
				//   key: 'id_name',
				//   type: 'text',
				// },
				// {
				//   title: '身份证号',
				//   key: 'id_number',
				//   type: 'text',
				// },
				// {
				//   title: '状态',
				//   key: 'status_name',
				//   type: 'text',
				// },
			 //  ]
			 //  // console.log(112, this.$refs.table.tableData)
			 //  const tableDatas = JSON.parse(JSON.stringify(this.$refs.table.tableData))//这里面填写你接口的数据
			 //  const datas = tableDatas
			 //  table2excel(column, datas, '订单列表')
			 var reqData = {
			 	[config.request.page]: this.$refs.table.currentPage,
			 	[config.request.pageSize]: this.$refs.table.scPageSize,
			 	[config.request.prop]: this.$refs.table.prop,
			 	[config.request.order]: this.$refs.table.order
			 }
			 let search = JSON.parse(JSON.stringify(this.search))
			 var res = await this.$API.order.distribution.list.get({...reqData, ...this.$refs.table.tableParams, ...search, is_export: 1});
			 if (res.code == 200) {
			 	window.open(res.data.url, '_blank')
			 } else {
			 	this.$alert(res.msg, "提示", {
			 		type: 'error'
			 	})
			 }
			},
			//标签切换
			tabChange(name) {
				this.search.is_renting = name
				this.$refs.table.reload({
					...this.search
				})
			},
			//搜索
			upsearch() {
				// console.log(112, this.search)
				let search = JSON.parse(JSON.stringify(this.search))
				this.$refs.table.upData({
					...search
				})
			},
			async getInit() {
				// this.getShopList()
			},

			//删除
			// async table_del(row){
			// 	var reqData = {id: row.id}
			// 	var res = await this.$API.electric.electric.delete.post(reqData);
			// 	if(res.code == 200){
			// 		this.$refs.table.refresh()
			// 		this.$message.success("删除成功")
			// 	}else{
			// 		this.$alert(res.msg, "提示", {type: 'error'})
			// 	}
			// },
			//添加
			// add() {
			// 	this.dialog.save = true
			// 	this.$nextTick(() => {
			// 		this.$refs.saveDialog.open()
			// 	})
			// },
			//窗口编辑
			// table_edit(row) {
			// 	this.dialog.save = true
			// 	this.$nextTick(() => {
			// 		this.$refs.saveDialog.open('edit').setData(row)
			// 	})
			// },

			//本地更新数据
			handleSaveSuccess(data, mode) {
				//为了减少网络请求，直接变更表格内存数据
				console.log(data, mode)
				if (mode == 'add') {
					this.$refs.table.unshiftRow(data)
				} else if (mode == 'edit') {
					this.$refs.table.updateKey(data)
				} else {
					// 刷新表格
					this.$refs.table.refresh()
				}

				//当然也可以暴力的直接刷新表格
				// this.$refs.table.refresh()
			},
		}
	}
</script>

<style>
</style>
